<html>
  <head>
    <style>
      .box-float {
        width: 100px;
        height: 50px;
        background-color: red;
        float: left;
      }
      .box {
        /*设置BFC*/
        overflow: hidden;
        width: 600px;
        height: 100px;
        background-color: blue;
      }

      .father {
        width: 300px;
        height: 300px;
        /* border-top: 1px solid #000; */
        /* padding-top:10px; */
        background: #ccc;
        margin-top: 10px;
        margin-bottom: 20px;
      }
      .child {
        width: 300px;
        height: 150px;
        border: 1px solid #f00;
        margin-top: 50px;
      }
      .father-bother-outter{
        display: flex;
      }
      .father-bother {
        width: 300px;
        height: 300px;
        /* border-top: 1px solid #000; */
        /* padding-top:10px; */
        background: #ccc;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box-float"></div>
    <div class="box"></div>
    对于两个嵌套关系的块元素，如果父元素没有上内边距padding、没有上边框、没有内容，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距取其较大者。
    <div class="father">
      <!-- 父盒子 -->
      <div class="child">子盒子</div>
    </div>
    <div class="father-bother-outter">
      <div class="father-bother"></div>
    </div>
    <script></script>
  </body>
</html>
